<template>
	<view class="container">
		<view class="refundTimedown">
			<view class="refundcontent">
				<text class="refundtitle">{{getRefundtext}}</text>
				<u-count-down separator="zh" :timestamp="getSeconds" v-if="!isRefunded" :show-days="false"></u-count-down>
				<text v-else class="refundtime">2020年12月7日 12:21</text>
			</view>
		</view>
		<view class="refundinfo">
			<u-cell-group :border="false">
				<u-cell-item :arrow="false" title="退款金额" :value="price.toFixed(2)|addPaysign" :value-style="{color:'red'}" :title-style="{fontSize:'30rpx'}"></u-cell-item>
			</u-cell-group>
			<view class="refundinfo-bottom">
				<u-icon name="pushpin" size="30" color="#888"></u-icon>
				<text v-if="!isRefunded">如果长时间未处理，平台将会介入</text>
				<text v-else>已退回顾客钱包</text>
			</view>
		</view>
		<view class="refundorder">
			<view class="refundorder-content">
				<text class="refundinfo-title">退款信息</text>
				<view class="serviceinfo">
					<image src="/static/avatar.jpg" mode=""></image>
					<view class="serviceinfo-right">
						<text>雇佣师傅：王静</text>
						<text>上门时间：5:00 至 6:00</text>
						<text>工种：水电、开锁、水电</text>
					</view>
				</view>
				<view class="refundorder-info">
					<view class="refundorder-infoitem">
						<text class="itemtitle">退款原因：</text>
						<text class="itemvalue">未按约定前来售后</text>
					</view>
					<view class="refundorder-infoitem">
						<text class="itemtitle">退款金额：</text>
						<text class="itemvalue error">{{price.toFixed(2)|addPaysign}}</text>
					</view>
					<view class="refundorder-infoitem">
						<text class="itemtitle">申请时间：</text>
						<text class="itemvalue">2020-09-28 10:23：21</text>
					</view>
					<view class="refundorder-infoitem">
						<text class="itemtitle">订单编号：</text>
						<text class="itemvalue">2456415454154</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottombtn" v-if="!isRefunded">
			<text>平台已同意退款</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hours:24,
				price:200,
				isRefunded:false //是否已退款
			}
		},
		onLoad() {
		},
		methods: {
			
		},
		computed:{
			getSeconds:function(){
				return this.hours*60*60;
			},
		    getRefundtext:function(){
				return this.isRefunded?'退款成功':'申请退款';
			}
		},
		filters:{
			addPaysign:function(val){
				return '￥'+val;
			}
		}
	}
</script>

<style lang="scss">
      page{
		  width: 100%;
		  height: 100%;
	  }
	  .container{
		  width: 100%;
		  height: 100%;
		  background-color: #F4F8FB;
		  display: flex;
		  flex-wrap: wrap;
		  flex-direction: column;
		  align-items: center;
		  .refundTimedown{
			  width: 100%;
			  height: 140rpx;
			  background-color: #FFFFFF;
			  padding-top: 20rpx;
			  padding-bottom: 20rpx;
		  }
		  .refundcontent{
			  width: 680rpx;
			  margin: auto;
		  }
		  .refundtitle{
			  font-weight: bold;
			  font-size:30rpx;
			  display: block;
			  margin-bottom: 20rpx;
		  }
		  .refundinfo{
			  background-color: #FFFFFF;
			  width: 100%;
			  height: auto;
			  margin-top: 20rpx;
		  }
		  .refundinfo-bottom{
			  display: flex; 
			  align-items: center;
			  width: 680rpx;
			  height: 100rpx;
			  margin:auto;
			  text{
				  color: #888;
				  font-size: 28rpx;
				  word-break: break-all;
				  margin-left: 10rpx;
			  }
		  }
		  .refundorder{
			  width: 100%;
			  height: auto;
			  background-color: #FFFFFF;
			  padding-top: 20rpx;
			  padding-bottom:20rpx;
			  margin-top: 20rpx;
		  }
		  .refundorder-content{
			  width: 680rpx;
			  height: auto;
			  margin: auto;
			  .refundinfo-title{
				  display: block;
				  width: 100%;
			  }
			  .serviceinfo{
				  width: 100%;
				  height: auto;
				  display: flex;
				  align-items: center;
				  image{border-radius: 10rpx;width: 200rpx;height: 200rpx;}
				  margin-top: 20rpx;
			  }
			  .serviceinfo-right{
				  display: flex;
				  flex: 1;
				  flex-wrap: wrap;
				  flex-direction: column;
				  justify-content: space-around;
				  margin-left: 20rpx;
				  text{display: block;width: 100%;font-size: 28rpx;margin-bottom: 15rpx;}
			  }
			  .refundorder-info{
				  width: 680rpx;
				  height: auto;
				  margin: auto;
				  .refundorder-infoitem{display: flex;flex: 1;flex-wrap: wrap;margin-top: 20rpx;}
				  .itemtitle{font-size: 30rpx;color: #555;}
				  .itemvalue{word-break: break-all;font-size: 30rpx;color: #555;}
			  }
			
		  }
		  .bottombtn{
		    background-color: rgba(136,136,136,0.5);
		    color: #FFFFFF;
		    width: 600rpx;
		    text-align: center;
		    line-height: 80rpx;
		    height: 80rpx;
		    border-radius: 15rpx;
		    font-size: 28rpx;
			position: fixed;
			bottom: 20rpx;
		  }
		  .error{
			  color: red !important;
		  }
		  .refundtime{
			  color: #888;
			  font-size: 25rpx;
		  }
	  }
</style>
